<template>
    <div style="background: #f8f8f8;">
        <div v-if="orderList && orderList.length > 0">
            <LoadMore @loadMore="getList" :list="orderList" :pageNo="pageNo" :totalPage="totalPage"
                      v-if="orderList && orderList.length > 0">
                <div slot-scope="dloadSwiper" class="order_detail">
                    <div class="flex" @click="orderDetail(dloadSwiper.item.id)">
                        <div class="order_number">
                            <span class="order_text">订单号</span>
                            <span class="order_content">{{ dloadSwiper.item.id }}</span>
                        </div>
                        <div class="order_number">
                            <span class="order_text">收货人</span>
                            <span class="order_content">{{ dloadSwiper.item.consigneeName }}</span>
                        </div>
                        <div class="order_number">
                            <span class="order_text">收货地址</span>
                            <span class="order_content">{{ dloadSwiper.item.addressDetail }}</span>
                        </div>
                        <div class="order_number">
                            <span class="order_text">订单状态</span>
                            <span class="order_content" style="color:#f3a13a">{{ dloadSwiper.item.statusStr }}</span>
                        </div>
                        <div class="order_count">
                    <span class="order_count_text">共
                    <span class="order_count_num">{{ dloadSwiper.item.goodsCount }}</span>
                    件商品  合计：</span>
                            <span class="order_sum">¥ {{ dloadSwiper.item.finalPrice }}</span>
                        </div>
                    </div>
                    <orderBtn :orderType="1" :showCheckButton = "orderType === 'commonOrder'" :orderItem="dloadSwiper.item" v-if="dloadSwiper.item"></orderBtn>
                </div>
            </LoadMore>
        </div>
        <div v-if="orderList && orderList.length === 0 && pageNo > totalPage">
            <p style="margin-top:40px;text-align: center;font-size:14px;">您当前还没有订单</p>
        </div>
    </div>
</template>

<script>
    import {getOrderList, getMemberOrder, getReturnOrder} from '_common/services/order'
    import orderBtn from './orderBtn'
    import LoadMore from '_components/loadMore/loadMore'
    import wxLogin from '_common/wxLogin.js'
    export default {
        props: {
            orderType: {
                type: String,
                default: 'myorder'
            }
        },
        data () {
            return {
                orderList: [],
                pageNo: 1,
                totalPage: 1,
                pageSize: 10,
                memberOrderType: 1,
            }
        },
        async beforeMount() {
            await wxLogin(this.getData)
        },
        mounted() {
        },
        methods: {
            getData() {
            if (this.orderType === 'refund') {
                this.getRefundList()
            }
            else {
                this.getList()
            }
            this.type = this.orderType === 'myorder' ? 1 : 2
            },
            getRefundList () {
                if (this.pageNo <= this.totalPage) {
                    getReturnOrder(this.pageNo, this.pageSize).then(res => {
                        if (res && res.code === 0) {
                            let data = res.data
                            this.orderList = this.orderList.concat(data.data)
                            this.orderList.forEach((v, k) => {

                            })
                            this.totalPage = data.totalsPage
                            this.pageNo++
                        }
                        else {
                            this.$alertTip(res.msg || '获取订单列表失败请稍后再试')
                        }
                    }, reject => {
                        this.$alertTip('获取订单列表失败请稍后再试')
                    })
                }
            },
            getList () {
                if (this.pageNo <= this.totalPage) {
                    let getOrder;
                    if (this.orderType === 'myorder') getOrder = getOrderList;
                    if (this.orderType === 'refundOrder') {
                        getOrder = getMemberOrder;
                        this.memberOrderType = 2;
                    }
                    if (this.orderType === 'commonOrder') {
                        getOrder = getMemberOrder;
                        this.memberOrderType = 1;
                    }
                    getOrder(this.pageNo, this.pageSize, this.memberOrderType).then(res => {
                        if (res && res.code === 0) {
                            let data = res.data
                            this.orderList = this.orderList.concat(data.data)
                            this.orderList.forEach((v, k) => {
                                let str = ''
                                switch (v.status) {
                                    case 1:
                                        str = '未付款'
                                        break
                                    case 3:
                                        str = '已发货'
                                        break
                                    case 0:
                                        str = '已取消'
                                        break
                                    case 2:
                                        str = '已付款'
                                        break
                                    case 4:
                                        str = '已申请退货'
                                        break
                                    case 30:
                                        str = '已申请，待审核'
                                        break
                                    case 31:
                                        str = '已驳回'
                                        break
                                    case 32:
                                        str = '已通过'
                                        break
                                    case 33:
                                        str = '已退款'
                                        break
                                }
                                v.statusStr = str
                                let a = Date.parse(new Date()) / 1000
                                v.diff = v.payTimeStamp ? Math.ceil((a - v.payTimeStamp) / 3600 / 24) : ''
                                console.log(v.diff)
                            })
                            this.totalPage = data.totalsPage
                            this.pageNo++
                        }
                        else {
                            this.$alertTip(res.msg || '获取订单列表失败请稍后再试')
                        }
                    }, reject => {
                        this.$alertTip('获取订单列表失败请稍后再试')
                    })
                }
            },
            orderDetail (orderId) {
                if (this.orderType === 'myorder') {
                    this.$openRouter({
                        name: 'myOrderdetail',
                        query: {id: orderId}
                    })
                }
            },
            cancelOrder () {

            }
        },
        components: {
            LoadMore,
            orderBtn
        }
    }
</script>
<style lang="less">
    @import "../../css/common";

    body {
        .loadmore {
            display: flex;
            align-items: center;
            margin-left: 32px;
            margin-top: 30px;
            color: #999999;
        }
        .order_detail {
            margin: 0px 30px;
            margin-bottom: 20px;
            padding: 24px 24px;
            display: flex;
            flex-direction: column;
            background-color: #ffffff;
            border-radius: 16px;
            div.flex {
                > div {
                    .flex(flex-start, items-start);
                    margin-bottom: 24px;
                    &.order_count {
                        .flex(flex-end, items-start);
                        margin-bottom: 48px;
                        .order_count_text {
                            font-size: 24px;
                            color: #999999;
                            .order_count_num {
                                color: @color_orange;
                            }
                            .order_sum {
                                font-size: 32px;
                                color: #333333;
                            }
                        }
                    }
                    span {
                        line-height: 1.5;
                    }
                    .order_text {
                        display: inline-block;
                        width: 112px;
                        font-size: 26px;
                        color: #999999;
                        margin-right: 34px;
                        :last-child {
                            margin-bottom: 32px;
                        }
                    }
                    .order_content {
                        font-size: 28px;
                        color: #333333;
                    }
                }
            }
        }
        .cancelBorder {
            border-radius: 0px !important;
            margin: 20px 0px;
            padding: 32px 32px 0px;
            width: 100%;
            box-sizing: border-box;
        }
        .messageTip {
            font-size: 32px;
            color: #999;
            margin-top: 30px;
            text-align: center;
        }
    }
</style>
